<template>
  <div class="company-total-container">
    <!-- 搜索和筛选区域 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="queryParams" class="filter-form">
        <el-form-item label="企业名称">
          <el-input
            v-model="queryParams.companyName"
            placeholder="请输入企业名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input
            v-model="queryParams.companyId"
            placeholder="请输入客户编码"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="入驻类型">
          <el-select
            v-model="queryParams.entryMode"
            placeholder="请选择入驻类型"
            clearable
            style="width: 200px"
          >
            <el-option label="挂靠" value="挂靠" />
            <el-option label="实体" value="实体" />
          </el-select>
        </el-form-item>
        <el-form-item label="载体">
          <el-select
            v-model="queryParams.zt"
            placeholder="请选择载体"
            clearable
            style="width: 200px"
          >
            <el-option label="联健元和" value="联健元和" />
            <el-option label="达博" value="达博" />
            <el-option label="科澜项目" value="科澜项目" />
            <el-option label="国科项目" value="国科项目" />
            <el-option label="黄埭项目" value="黄埭项目" />
            <el-option label="金扶梯" value="金扶梯" />
            <el-option label="北联新翼" value="北联新翼" />
            <el-option label="深圳项目" value="深圳项目" />
            <el-option label="西山项目" value="西山项目" />
            <el-option label="秦淮项目" value="秦淮项目" />
            <el-option label="双创中心" value="双创中心" />
            <el-option label="创界项目" value="创界项目" />
            <el-option label="江环项目" value="江环项目" />
            <el-option label="江北项目" value="江北项目" />
            <el-option label="拓展项目" value="拓展项目" />
            <el-option label="试点项目" value="试点项目" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格区域 -->
    <el-card class="list-card">
      <el-table v-loading="loading" :data="companyList" border style="width: 100%">
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column prop="zt" label="载体" width="100" align="center" />
        <el-table-column
          prop="companyName"
          label="企业名称"
          min-width="250"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column prop="entryMode" label="入驻方式" width="100" align="center" />
        <el-table-column
          prop="industryCategory"
          label="行业分类"
          width="150"
          align="center"
        />
        <el-table-column prop="merchants" label="招商员" width="100" align="center" />
        <el-table-column
          prop="companyClass"
          label="注册类型"
          width="100"
          align="center"
        />
        <el-table-column
          prop="roomNum"
          label="房间号"
          min-width="150"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column label="入驻状态" width="140" align="center">
          <template #default="{ row }">
            <el-tag type="primary">
              {{
                !row.status || row.status == 0
                  ? "未开始入驻流程"
                  : row.status == 1
                  ? "备案中"
                  : row.status == 2
                  ? "合同拟定中"
                  : row.status == 3
                  ? "办证中"
                  : row.status == 4 && row.processId
                  ? "入驻中流程"
                  : "入驻中"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="viewCompanyProfile(row)">
              查看企业档案
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getCompanyTotalPage } from "@/api/companyTotal/companyTotal.js";

// 路由
const router = useRouter();

// 查询参数
const queryParams = reactive({
  companyName: "",
  companyId: "",
  entryMode: "",
  zt: "",
  pageNum: 1,
  pageSize: 10,
});

// 表格数据
const companyList = ref([]);
// 分页信息
const total = ref(0);
// 加载状态
const loading = ref(false);

// 获取数据列表
const getList = async () => {
  loading.value = true;
  try {
    const res = await getCompanyTotalPage(queryParams);
    if (res && res.code === 200) {
      // 处理返回的数据
      let rows = [];
      if (Array.isArray(res.rows)) {
        rows = res.rows;
      } else if (Array.isArray(res.data)) {
        rows = res.data;
      } else if (
        res.rows &&
        typeof res.rows === "object" &&
        typeof res.rows.length === "number"
      ) {
        rows = Array.from(res.rows);
      } else if (
        res.data &&
        typeof res.data === "object" &&
        typeof res.data.length === "number"
      ) {
        rows = Array.from(res.data);
      }
      companyList.value = rows;
      total.value = res.total || 0;
    } else {
      companyList.value = [];
      total.value = 0;
      ElMessage.error(res.msg || "获取数据失败");
    }
  } catch (error) {
    console.error("获取企业列表失败:", error);
    companyList.value = [];
    total.value = 0;
    ElMessage.error("获取数据失败");
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置
const resetQuery = () => {
  Object.assign(queryParams, {
    companyName: "",
    companyId: "",
    entryMode: "",
    zt: "",
    pageNum: 1,
    pageSize: 10,
  });
  getList();
};

// 查看企业档案
const viewCompanyProfile = (row) => {
  router.push({
    path: "/lookCompany",
    query: {
      companyId: row.companyId || row.id,
      readOnly: 1,
    },
  });
};

// 组件挂载时获取数据
onMounted(() => {
  getList();
});
</script>

<style scoped>
.company-total-container {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  padding: 10px 0;
}

.list-card {
  margin-top: 20px;
}

.el-table {
  font-size: 14px;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}
</style>
